<template>
  <div class="home">
    <div class="top-card">
      <div class="top-card-text">成为会员</div>
      <div class="top-card-text">海量方案轻松看</div>
    </div>
    <div class="mid-card">
      <div class="mid-card-style">
        <div class="mid-card-style-header mid-card-style-header-left">
          <div class="vip-name vip-name-left">非会员</div>
          <div class="mid-card-style-price">免费</div>
          <div>
            <div class="mid-card-style-header-btn">已注册</div>
          </div>
        </div>
        <div class="mid-card-style-body">
          <div class="mid-card-style-body-text">·基础功能</div>
          <div class="mid-card-style-body-text">·1个茶叶查看一份报告</div>
        </div>
      </div>
      <div class="mid-card-style" style="margin: 0 20px">
        <div class="mid-card-style-header">
          <div class="vip-name vip-name-right">超级会员</div>
          <div
            class="mid-card-style-price flex justify-content-center align-items-end"
            style="margin-top: 14px"
          >
            <div class="price">
              <span class="price-text">￥</span>
              <span class="price-num" v-if="items.length">{{
                items[0].price
              }}</span>
              <span class="price-text">/年</span>
            </div>
            <div class="price price-right" v-if="items.length">
              每天仅需￥{{ average }}
            </div>
          </div>
          <div>
            <el-popover placement="right" width="160" trigger="click">
              <!-- <login-qrcode :keepcount="loginVisible" /> -->
              <img
                style="width: 136px; height: 136px"
                src="@/assets/images/pay.png"
                alt
              />
              <div class="buyBtn" slot="reference" style="color: #fa8434">
                立即开通
              </div>

              <!-- <el-button slot="reference" type="primary" size="small" style="width: 160px;" @click="loginVisible=true">扫码登录</el-button> -->
            </el-popover>
          </div>
        </div>
        <div class="mid-card-style-body">
          <!-- <div class="mid-card-style-body-text">·有效期内可以查看所有方案</div> -->
          <div class="mid-card-style-body-text">·方案无限制搜索功能</div>
          <div class="mid-card-style-body-text">·网页+小程序，多终端查看</div>
          <div class="mid-card-style-body-text">·原文件随时下载</div>
        </div>
      </div>
    </div>

    <div class="bottom-card">
      <div>
        <!-- <div class="prompt-text">付费用于开通搜索、下载、群组等功能，方案免费提供</div> -->
        <div class="bottom-title">高端商务人士的选择</div>
        <div class="flex">
          <div class="left-title">方案对比</div>
          <div class="flex justify-content-center">
            <div class="body-info-card">
              <div class="body-info-card-top">非会员</div>
              <div class="body-info-card-mid">免费</div>
              <div class="body-info-card-bottom">已注册</div>
            </div>
            <div class="body-info-card">
              <div class="body-info-card-top">高级会员</div>
              <div
                class="body-info-card-mid"
                v-if="items.length"
                style="color: #e89e1d"
              >
                ￥ {{ items[0].price }}/年
              </div>
              <div
                class="body-info-card-bottom"
                style="background: #e89e1d"
                @click="toPay(6)"
              >
                付费开通
              </div>
            </div>
            <!-- <div class="body-info-card">
              <div class="body-info-card-top">普通会员</div>
              <div class="body-info-card-mid" style="color: #467dd0">
                ￥{{ generalVipPrice }}/季度
              </div>
              <div
                class="body-info-card-bottom"
                style="background: #467dd0"
                @click="toPay(1)"
              >
                立即开通
              </div>
            </div>-->
          </div>
        </div>
        <div class="flex">
          <div class="title-list">身份有效期</div>
          <div class="table-list">永久有效</div>
          <div class="table-list border-right">一年</div>
          <!-- <div class="table-list border-right">一季度</div> -->
        </div>
        <div class="flex">
          <div class="title-list">方案搜索</div>
          <div class="table-list">无限搜索</div>
          <div class="table-list border-right">无限搜索</div>
          <!-- <div class="table-list border-right">无限搜索</div> -->
        </div>
        <div class="flex">
          <div class="title-list">方案查看</div>
          <div class="table-list">每份方案消耗一枚茶叶</div>
          <div class="table-list border-right">每日查看+下载上限40份</div>
          <!-- <div class="table-list border-right">无限搜索</div> -->
        </div>

        <div class="flex">
          <div class="title-list">下载原件</div>
          <div class="table-list border-bottom">
            <img
              class="success-error"
              src="../assets/images/icon-error.png"
              alt
            />
          </div>
          <div class="table-list border-right border-bottom">
            <img
              class="success-error"
              src="../assets/images/icon-success.png"
              alt
            />
          </div>
        </div>

        <div class="tips">
          <div>
            温馨提示：网站设置防盗刷系统，请合理使用账号，如果用户短时间内高频或大量下载可能会触发该系统，
          </div>
          <div>将暂停账号下载功能，如有疑问请联系客服。</div>
          <div>
            温馨提示，你正在购买的是虚拟产品，购买后不支持退款，请斟酌后确认。
          </div>
        </div>
      </div>
    </div>

    <!-- <div class="QRcode">
      <div class="QRcode-top">
        <img src="@/assets/images/wechat-qrcode.jpg" alt />
      </div>
      <div class="QRcode-text">开发票</div>
    </div> -->

    <el-dialog title width="800px">
      <div class="group5 flex-col">
        <!-- <div class="outer8 flex-col">
              <div class="mod2 flex-row">
                <div class="main7 flex-col"></div>
              </div>
              <div class="mod3 flex-row"><div class="box7 flex-col"></div></div>
        </div>-->
        <div class="outer9 flex-row">
          <div class="main8 flex-col">
            <div class="block3 flex-row">
              <div class="outer10 flex-col">
                <div class="group6 flex-col">
                  <div class="outer11 flex-row">
                    <img
                      class="label6"
                      referrerpolicy="no-referrer"
                      src="@/assets/images/zhifubao.png"
                    />
                    <span class="word16">支付宝</span>
                  </div>
                </div>
              </div>
              <div class="outer12 flex-col">
                <iframe
                  name="iframeMap"
                  id="mobsf"
                  v-bind:srcdoc="zhifubaoUrl"
                  width="84px"
                  height="84px"
                  style="margin: 0 auto"
                  frameborder="0"
                  scrolling="no"
                  ref="iframeDom"
                ></iframe>
              </div>
              <div class="group6 flex-row" v-if="openid">
                <img
                  class="label7"
                  referrerpolicy="no-referrer"
                  src="@/assets/images/weixin.png"
                />
                <span class="word17">微信</span>
              </div>

              <div class="outer12 flex-col">
                <img
                  v-if="paySrcUrl && openid"
                  class="img2"
                  referrerpolicy="no-referrer"
                  :src="paySrcUrl"
                />
              </div>
            </div>
          </div>
          <div class="main9 flex-col">
            <div class="group8 flex-row">
              <span class="info4">金额</span>
              <span class="word18">￥</span>
              <span class="info5">{{ price }}</span>
            </div>
            <span class="txt6">扫描右侧二维码申请发票→→</span>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import Header from "@/components/header.vue";
import Footer from "@/components/footer.vue";
import LoginQrCodeComp from "@/components/LoginQrCodeComp";

import {
  getZhifubao,
  getVipPrice,
  getLastOrderPayStatus,
  getGongzhonghaoUrl,
} from "@/api/user.js";

import { createPayQrcode, getRcmdList } from "@/api/index.js";
var that;
export default {
  name: "Home",
  components: {
    Header,
    Footer,
    "login-qrcode": LoginQrCodeComp,
  },
  data() {
    return {
      loginVisible: false,
      paySrcUrl: "",
      generalVipPrice: 0,
      generalVipRawPrice: 0,
      seniorVipPrice: 0,
      seniorVipRawPrice: 0,
      seniorVipDayPrice: 0,
      price: 0,
      zhifubaoUrl: "",
      items: [],
      average: 0,
    };
  },
  created() {
    //知乎会员充值页面代码
    if (process.client) {
      document.body.scrollTop = 0;
      document.documentElement.scrollTop = 0;
    }
    this.getVipPriceList();
  },
  computed: {
    ...mapGetters(["openid"]),
  },
  methods: {
    getPayStatus() {
      var count = 0;
      var loopId = window.setInterval(() => {
        if (!that.loginVisible) {
          clearInterval(loopId);
        }
        count++;
        getLastOrderPayStatus(0)
          .then((res) => {
            if (res.data == 1 || res.message == "订单信息不存在") {
              window.location.reload();
            }
          })
          .catch((err) => {
            this.loading = false;
            // window.location.reload();
          });
        getLastOrderPayStatus(1)
          .then((res) => {
            //   "--------------------------------------------------------------------------------dayin"
            // );
            if (res.data == 1 || res.message == "订单信息不存在") {
              window.location.reload();
            }
          })
          .catch((err) => {
            this.loading = false;
            // window.location.reload();
          });
      }, 1000);
    },
    toPay(type) {
      that = this;
      let params = {
        item_id: type,
        openid: this.openid,
      };
      let url =
        process.env.VUE_APP_BASE_API +
        "/api/pay/wxOffiaccountQrCode?offiaccountOpenid=" +
        params.openid +
        "&itemId=" +
        params.item_id;
      this.paySrcUrl = url;
      this.loginVisible = true;
      var goodName;
      if (type == 6) {
        this.price = this.seniorVipPrice;
        goodName = "高级会员";
      } else if (type == 1) {
        this.price = this.generalVipPrice;
        goodName = "普通会员";
      }
    },

    //获取会员价格数据信息
    getVipPriceList() {
      getVipPrice().then((res) => {
        console.log(res);
        if (res.code == 0) {
          this.items = res.data;
          this.average = (this.items[0].price / 365).toFixed(2);
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.group5 {
  z-index: auto;
}
.outer8 {
  z-index: 119;
  height: 240px;
  border-radius: 4px;
  background-color: rgba(243, 245, 247, 1);
  width: 640px;
}
.mod2 {
  z-index: auto;
  width: 32px;
  height: 16px;
  margin: 224px 0 0 154px;
}
.main7 {
  z-index: 120;
  width: 32px;
  height: 16px;
  background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngd7655bb19d00d9f6f454447b526ac43714f96198cad15442a7fd9e1d7bf3b050)
    100% no-repeat;
}
.mod3 {
  z-index: auto;
  width: 12px;
  height: 13px;
  margin: -232px 0 0 620px;
}
.box7 {
  z-index: 172;
  width: 12px;
  height: 13px;
  background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng9b5a1e62630c47aa795dc99b9fb10d6244ba7d2075de9e75796a2b935c062d25) -1px -1px
    no-repeat;
}
.outer9 {
  z-index: auto;
  height: 121px;
  justify-content: space-between;
  margin: 18px 0 0 30px;
}
.main8 {
  z-index: 116;
  height: 122px;
  border: 1px solid rgba(233, 235, 238, 1);
  margin-top: 1px;
}
.block3 {
  z-index: auto;
  height: 120px;
  justify-content: space-between;
}
.outer10 {
  z-index: auto;
  width: 100px;
  height: 104px;
}
.group6 {
  z-index: 118;
  height: 60px;
  background-color: rgba(255, 255, 255, 1);
  width: 100px;
  justify-content: center;
  align-items: center;
}
.outer11 {
  z-index: auto;
  width: 66px;
  height: 28px;
  justify-content: space-between;
}
.label6 {
  z-index: 163;
  width: 20px;
  height: 20px;
  margin-top: 4px;
}
.word16 {
  z-index: 161;
  height: 28px;
  display: block;
  overflow-wrap: break-word;
  color: rgba(63, 71, 80, 1);
  font-size: 14px;
  font-family: PingFang-SC-Regular;
  line-height: 28px;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
}
.group7 {
  z-index: auto;
  width: 52px;
  height: 28px;
  justify-content: space-between;
  margin: 16px 0 0 24px;
}
.label7 {
  z-index: 167;
  width: 20px;
  height: 18px;
  margin-right: 3px;
}
.word17 {
  z-index: 162;
  height: 28px;
  display: block;
  overflow-wrap: break-word;
  color: rgba(63, 71, 80, 1);
  font-size: 14px;
  font-family: PingFang-SC-Regular;
  line-height: 28px;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
}
.outer12 {
  z-index: 117;
  height: 120px;
  background-color: rgba(255, 255, 255, 1);
  width: 120px;
  justify-content: center;
  align-items: center;
}
.img2 {
  z-index: 171;
  width: 108px;
  height: 108px;
}
.main9 {
  z-index: auto;
  width: 288px;
  height: 118px;
  margin-left: 10px;
}
.group8 {
  z-index: auto;
  width: 117px;
  height: 56px;
}
.info4 {
  z-index: 158;
  height: 28px;
  display: block;
  overflow-wrap: break-word;
  color: rgba(142, 150, 157, 1);
  font-size: 14px;
  font-family: PingFang-SC-Regular;
  line-height: 28px;
  text-align: left;
  margin-top: 22px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.word18 {
  z-index: 137;
  width: 16px;
  height: 22px;
  display: block;
  overflow-wrap: break-word;
  color: rgba(255, 85, 98, 1);
  font-size: 16px;
  font-family: PingFang-SC-Medium;
  white-space: nowrap;
  line-height: 22px;
  text-align: left;
  margin: 25px 0 0 8px;
}
.info5 {
  z-index: 140;
  width: 65px;
  height: 56px;
  display: block;
  overflow-wrap: break-word;
  color: rgba(255, 85, 98, 1);
  font-size: 40px;
  font-family: PingFang-SC-Medium;
  white-space: nowrap;
  line-height: 56px;
  text-align: left;
}
.txt6 {
  z-index: 159;
  height: 28px;
  display: block;
  overflow-wrap: break-word;
  color: rgba(142, 150, 157, 1);
  font-size: 14px;
  font-family: PingFang-SC-Regular;
  line-height: 28px;
  text-align: left;
  align-self: flex-start;
  margin-top: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.info6 {
  z-index: 160;
  width: 288px;
  height: 28px;
  display: block;
  overflow-wrap: break-word;
  color: rgba(142, 150, 157, 1);
  font-size: 14px;
  font-family: PingFang-SC-Regular;
  line-height: 28px;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
}
.home {
  position: relative;
  width: 100%;
  min-height: 100%;
}
.top-card {
  background-image: url("../assets/images/vip-bg.png");
  background-size: 100%;
  height: 433px;
  padding-top: 48px;
  &-text {
    font-size: 32px;
    color: #ffffff;
    text-align: center;
  }
}
.prompt-text {
  width: 100%;
  text-align: center;
  font-size: 16px;
  color: #666;
  margin-top: -70px;
  padding-bottom: 90px;
}
.mid-card {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  &-style {
    position: relative;
    top: -232px;
    box-shadow: 0px 8px 16px 0px rgba(63, 71, 80, 0.08);
    border-radius: 2px;
    width: 280px;
    &-header {
      background: orange;
      width: 280px;
      text-align: center;
      padding: 32px 24px 16px 24px;
      height: 160px;
      &-left {
        background-image: url("../assets/images/vip1.png");
        background-size: 100%;
      }
      &-mid {
        background-image: url("../assets/images/vip3.png");
        background-size: 100%;
      }
      &-right {
        background-image: url("../assets/images/vip2.png");
        background-size: 100%;
      }
      &-btn {
        width: 100%;
        background-color: #ffffff;
        border: none;
        border-radius: 2px;
        color: #8e969d;
        font-size: 14px;
        padding: 6px 0;
        cursor: pointer;
      }
    }
    &-body {
      background: #ffffff;
      width: 280px;
      height: 180px;
      padding: 16px 20px;
      font-size: 14px;
      color: #8e969d;
      &-text {
        margin-bottom: 10px;
      }
    }
    &-price {
      font-size: 14px;
      color: #8e969d;
      margin: 25px 0 15px 0;
    }
  }
}
.vip-name {
  font-size: 24px;
  &-left {
    color: #3f4750;
  }
  &-right {
    color: #ffffff;
  }
}
.price {
  color: #ffffff;
  font-size: 14px;
  &-text {
    font-size: 16px;
  }
  &-num {
    font-size: 24px;
  }
  &-right {
    margin-left: 12px;
  }
}
.QRcode {
  text-align: center;
  padding: 8px 8px 12px 8px;
  position: fixed;
  top: 30%;
  right: 0;
  background: #ffffff;
  border-radius: 2px;
  z-index: 9999;
  &-top {
    // background: black;
    width: 120px;
    height: 120px;
    img {
      display: block;
      width: 100%;
      height: 100%;
    }
  }
  &-text {
    margin-top: 8px;
    font-size: 14px;
    color: #3f4750;
  }
}
.bottom-title {
  text-align: center;
  font-size: 24px;
  color: #3f4750;
  margin-bottom: 41px;
}
.left-title {
  font-size: 20px;
  color: #3f4750;
  width: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 60px;
}
.body-info-card {
  text-align: center;
  width: 240px;
  padding: 0 38px 20px 38px;
  &-top {
    font-size: 20px;
    color: #3f4750;
    font-weight: 500;
  }
  &-mid {
    font-size: 16px;
    color: #8e969d;
  }
  &-bottom {
    background: rgba(203, 208, 213, 1);
    border-radius: 2px;
    color: #ffffff;
    font-size: 14px;
    padding: 6px 0;
    cursor: pointer;
    margin-top: 8px;
  }
}
.title-list {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  color: #3f4750;
  font-weight: 500;
  width: 100px;
  margin-right: 54px;
}
.table-list {
  border-top: 1px solid #cbd0d5;
  border-left: 1px solid #cbd0d5;
  width: 240px;
  height: 64px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.border-right {
  border-right: 1px solid #cbd0d5;
}
.border-bottom {
  border-bottom: 1px solid #cbd0d5;
}
.bottom-card {
  position: relative;
  top: -120px;
  display: flex;
  justify-content: center;
}
.tips {
  text-align: center;
  margin-top: 40px;
  font-size: 14px;
  color: #8e969d;
}
.success-error {
  width: 22px;
  height: 22px;
}

.flex-col {
  display: flex;
  flex-direction: column;
}
.flex-row {
  display: flex;
  flex-direction: row;
}
.buyBtn {
  width: 100%;
  background-color: #ffffff;
  border: none;
  border-radius: 2px;
  color: #8e969d;
  font-size: 14px;
  padding: 6px 0;
  cursor: pointer;
}
</style>
